<template>
    <el-aside 
    class="relative sm:fixed el-scrollbar-parent"
    :class="{
        ...menuPhoneShow
    }"
    :style="{
        width: `${menuWidth}px`
    }"
    >
        <div class="menu-content relative bg-white">
            <el-scrollbar
            class="el-scrollbar"
            >
                <!-- <el-menu-item
                >
                    <template #title>
                        <div class="center w-full">
                            <el-button class="mt-20">退出登陆</el-button>
                        </div>
                    </template>
                </el-menu-item> -->
                <div class="center w-full">
                    <el-button @click="clickLogout" class="mt-4 mb-4">退出登陆</el-button>
                </div>
                <el-menu
                router
                :collapse="isCollapse"
                :unique-opened="true"
                class="el-menu h-full"
                >
                    <el-menu-item
                    index="/updateTopic/0"
                    >
                        <el-icon class="icon"><DocumentAdd /></el-icon>
                        <template #title>
                            <span class="select-none">新增试题</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item
                    index="/topicList"
                    >
                        <el-icon class="icon"><Document /></el-icon>
                        <template #title>
                            <span class="select-none">试题列表</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item
                    index="/savePaper/0"
                    >
                        <el-icon class="icon"><DocumentAdd /></el-icon>
                        <template #title>
                            <span class="select-none">新增试卷</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item
                    index="/paperList"
                    >
                        <el-icon class="icon"><Document /></el-icon>
                        <template #title>
                            <span class="select-none">试卷列表</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item
                    index="/generatepaper"
                    >
                        <el-icon class="icon"><DocumentAdd /></el-icon>
                        <template #title>
                            <span class="select-none">生成模拟试卷</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item
                    index="/saveUser/0"
                    >
                        <el-icon class="icon"><DocumentAdd /></el-icon>
                        <template #title>
                            <span class="select-none">新增会员</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item
                    index="/userList"
                    >
                        <el-icon class="icon"><User /></el-icon>
                        <template #title>
                            <span class="select-none">会员列表</span>
                        </template>
                    </el-menu-item>
                </el-menu>
            </el-scrollbar>

            <div v-show="!isCollapse" class="line"></div>
            <div v-show="!isCollapse" @click="triggleCollapse" class="foot-btn mt-2 flex items-center ml-5 cursor-pointer select-none pb-2">
                <svg class="iconpark-icon"><use href="#menu-fold"></use></svg>
                <span>收起导航</span>
            </div>
        </div>
        <div 
        class="expand absolute w-full"
        v-show="isCollapse"
        >
            <div class="row center">
                <svg @click="triggleCollapse" class="iconpark-icon expand-collapse"><use href="#menu-fold"></use></svg>
            </div>
        </div>
    </el-aside>
</template>
    
<script setup lang='ts'>
import { ref, computed, watch } from 'vue';
import { useMenuStore } from '@/Stores/menu';
import type { AnyObj } from '@/Utils/type';
import { useOverlayStore } from '@/Stores/overlay';
import { DocumentAdd, Document, User } from '@element-plus/icons-vue';
import { logout } from '@/Utils/utils';

// 导航栏公共状态管理
const menuStore = useMenuStore();

const isCollapse = ref(false);

const menuTreeList = ref([
    {
        name: '新增试题',
        path: '/updateTopic/0'
    },
    {
        name: '试题列表',
        path: '/topicList'
    },
]);

const openedId = ref(''); // 当前展开的菜单id

const actMenuId = ref(''); // 当前点击的页面id

const overlayStore = useOverlayStore();

// 点击切换
const triggleCollapse = () => {
    isCollapse.value = !isCollapse.value;
};

const menuPhoneShow = computed(() => {
    const className: AnyObj = {};

    if (typeof menuStore.isShow === 'boolean') {
        className['menu-phone'] = true;
    }

    if (menuStore.isShow === true) {
        className['menu-phone-show'] = true;
    }

    return className
});

// 点击退出登陆
const clickLogout = () => {
    logout();
};

watch(
    () => overlayStore,
    () => {
        // console.log('watch');
        if (typeof menuStore.isShow === 'boolean' && overlayStore.isShow === false) {
            menuStore.setShow(false);
        }
    },
    { deep: true }
);

const menuWidth = computed(() => {
    if (isCollapse.value) {
        return 48;
    }
    return 196;
});
</script>
    
<style lang="scss" scoped>
.el-scrollbar {
    height: calc(100vh - 60px);

    :deep .el-menu--collapse {
        width: 48px;
        .el-sub-menu__title {
            padding-left: 14px;
        }
    }

    .el-menu {
        min-height: calc(100vh - 89px);
        border: 0;
        // z-index: 11;
        .icon {
            margin-left: -6px;
        }

        .logo {
            height: 48px;
            margin-bottom: 20px;

            .logo-img {
                // width: 122px;
                margin-left: 20px;
            }

            .logo-collapse-img {
                width: 30px;
                height: 30px;
            }
        }

        .el-sub-menu {

            :deep .el-sub-menu__title, .el-menu-item {
                color: $default-gray;
            }
        }

        :deep .el-menu-item-group__title {
            display: none;
        }

        :deep .act-sub {
            .el-sub-menu__title {
                // color: #ffffff;
                // background: #ffffff;
                // background: linear-gradient(90deg, #4CC6F3 0%, #4C7CF3 100%);
                // border-radius: 100px 0px 0px 100px;
                // font-weight: bold;
                color: #47453D;
            }
        }

        // .act-menu {
        //     color: #4c7cf3 !important;
        // }

        .act-menu {
            // color: #4c7cf3 !important;
            background: #ECF2FE;
            color: #0052D9 !important;
        }

        :deep .el-menu-item {
            height: 37px;
        }

        :deep .el-sub-menu__title {
            height: 43px;
        }

        .el-menu-item {
            user-select: none;
        }
        :deep .icon-span {
            .iconpark-icon {
                width: 16px;
                height: 16px;
                font-size: 20px;
            }
        }

        // .iconfont {
        //     color: #8A98AC;
        // }
    }
}
.sm-el-menu {
    right: -250px;
}
.el-scrollbar-parent {
    width: 250px;
    transition: all 0.25s ease-out;
}
.el-scrollbar-parent {
    box-shadow: 1px 0px 4px 0px #e7e7e7;
    // .el-menu {
    //     box-shadow: 2px 0px 8px 0px #DBDBDB !important;
    //     .el-sub-menu {
    //         box-shadow: 2px 0px 8px 0px #DBDBDB !important;
    //     }
    // }
}
@media screen and (max-width: 639px) {
    .el-scrollbar-parent {
        left: -250px;
    }
}
.menu-phone-show {
    left: 0 !important;
    z-index: 16;
}
.foot-btn {
    height: 44px;
    color: $default-gray;
    position: relative;
    z-index: 10;
}
// .desktop {
//     border-top: 1px solid #E7E7E7;
// }
.line {
    height: 1px;
    margin: 0 20px;
    background: #E7E7E7;
}
.icon-18 {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: #8A98AC;
}
.iconpark-icon {
    display: block;
    margin-right: 10px;
}
.expand {
    bottom: 0px;
    .row {
        height: 40px;
    }
    .expand-collapse {
        color: #8A98AC;
        transform: rotate(-180deg);
    }
    .iconpark-icon {
        margin-right: 0px;
        color: #8A98AC;
    }
}
</style>